<template>
	<view class="homeLayout pagepg">
		<custmon-nav-bar :title="'推荐'"></custmon-nav-bar>
		<view class="banner">
			<swiper indicator-dots indicator-color="#fff" circular autoplay :interval="3000" :duration="1000">
				<swiper-item v-for="i in homeBannerList" :key="i._id">
					<image :src="i.picurl" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="notic">
			<view class="left">
				<uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper vertical autoplay :interval="3000" :duration="1000" circular>
					<swiper-item v-for="i in wallNewsList" @click="goNotic(i._id,i.publish_date)">
						<text class="text">{{i.title}}</text>
					</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="20" color="#28b389"></uni-icons>
			</view>
		</view>
		<view class="select">
			<commentTitle>
				<template #name>
					每日推荐
				</template>
				<template #custom>
					<view class="date">
						<uni-icons type="calendar-filled" size="20" color="$uni-color-main"></uni-icons>
						<uni-dateformat :date="Date.now()" format="MM月dd日"></uni-dateformat>
					</view>
				</template>
			</commentTitle>
			<view class="conent">
				<scroll-view scroll-x >
					<view v-for="i in RandomP" @click="goPreview(i._id)" :key="i._id">
						<image :src="i.smallPicurl" mode="aspectFit" ></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="theme">
			<commentTitle >
				<template #name>
					专题推荐
				</template>
				<template #custom>
					<navigator url="#">More+</navigator>
				</template>
			</commentTitle>
			<view class="conent">
				<thtme-item v-for="i in classify" :classifyList="i" :key="_id"></thtme-item>
				<thtme-item :isMore="true" ></thtme-item>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onMounted,ref } from 'vue';
import {request} from '../../utils/request'
import {onShareAppMessage} from "@dcloudio/uni-app"
let homeBannerList = ref([])
let RandomP = ref([])
let wallNewsList = ref([])
let classify = ref([])
onMounted(()=>{
	getHomeBanner()
	getRandomP()
	getWallNewsList()
	getClassify()
})
const goPreview = (id) =>{
	uni.setStorageSync("classList",RandomP.value)
	uni.navigateTo({
		url:"/pages/preview/preview?id="+id
	})
}
const goNotic = (id,publish_date) =>{
	uni.navigateTo({
		url:"/pages/notice/detail?id="+id+"&publish_date="+publish_date
	})
}
// 获取海报
const getHomeBanner = () =>{
	//   request({
	// 	url:"/homeBanner",
	// 	method:'GET',
	// }).then(res=>{
	// 	homeBannerList.value = res.data.data
	// })
	uniCloud.callFunction({
		name:"getHomeBanner",
		data:{}
	}).then(res=>{
		homeBannerList.value = res.result.data
	})
}
//获取随机图片
const getRandomP = () =>{
	// let res =  request({
	// 	url:"/randomWall",
	// 	method:'GET',
	// }).then(res=>{
	// 	RandomP.value = res.data.data
	// 	console.log("随机图片",RandomP.value);
	// })
	uniCloud.callFunction({
		name:"getRandomP",
		data:{}
	}).then(res=>{
		RandomP.value = res.result.data
	})
}
//获取公告
const getWallNewsList = () =>{
	// let res =  request({
	// 	url:"/wallNewsList",
	// 	method:'GET',
	// 	data:{
			
	// 	}
	// }).then(res=>{
	// 	wallNewsList.value = res.data.data
	// })
	uniCloud.callFunction({
		name:"getWallNewsList",
		data:{}
	}).then(res=>{
		wallNewsList.value = res.result.data
	})
}
//获取分类
const getClassify = () =>{
	// let res =  request({
	// 	url:"/classify",
	// 	method:'GET',
	// 	data:{
	// 		pageSize:8,
	// 		select:true
	// 	}
	// }).then(res=>{
	// 	classify.value = res.data.data
	// 	console.log("我要看的",classify.value);
	// })
	uniCloud.callFunction({
		name:"getClassify",
		data:{
			pageSize:8,
			select:true
		}
	}).then(res=>{
		classify.value = res.result.data
		console.log("获取分类列表",res);
	})
}
//分享好友
onShareAppMessage((e)=>{
	return{
		title:'壁纸',
		path:"/pages/index/index"
	}
})
</script>

<style lang="scss" scoped>
	.homeLayout{
		.banner{
			width: 750rpx;
			padding: 30rpx 0;
			swiper{
				margin: auto;
				width: 690rpx;
				height: 340rpx;
				image{
					width: 100%;
					height: 340rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
	.notic{
		width: 690rpx;
		height: 80rpx;
		margin: auto;
		background-color: #f9f9f9;
		display: flex;
		border-radius: 15rpx;
		.left{
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.text{
				color:$uni-color-main;
				font-size: 28rpx;
			}
		}
		.center{
			flex: 1;
			swiper{
				line-height: 80rpx;
				height: 100%;
				width: 100%;
				&-item{
					font-size: 28rpx;
					color: #28b389;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
		.right{
			width: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.select{
		padding-top: 50rpx;
		.conent{
			width: 690rpx;
			margin-top: 30rpx;
			margin-left: 30rpx;
			border-radius: 12rpx;
			scroll-view{
				white-space: nowrap;
				view{
					width: 200rpx;
					height: 400rpx;
					display: inline-block;
					margin-right: 15rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}
				}
				view:last-child{margin-right: 0;}
			}
		}
		.date{
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.theme{
		padding-top: 50rpx;
		.conent{
			margin-top: 30rpx;
			padding: 0 30rpx;
			display: grid;
			gap: 15rpx;
			grid-template-columns: repeat(3,1fr);
		}
	}
</style>
